<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fun" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>组织信息</title>
    <link rel="stylesheet" href="css/base.css">
    <style type="text/css">
        .unbind_box {
            height: 260px;
        }
         .getMoreOrder:after, .noMoreOrder:after {
            position: relative;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/handle.js"></script>

</head>
<body class="ed" style="position:relative">
<div class="wrap cardmng_wrap">
    <div class="card_list">
    </div>
    <div class="addCardBtn none" onclick="joinGroup()">
        <img src="img/add_blue.png">添加组织
    </div>

</div>
<div class="mask_layer none">
    <div class="unbind_box">
        <p class="unbindBtn" id="seeIntroduce">查看介绍</p>
        <p class="unbindBtn" id="seeFrame">查看架构</p>
        <p class="unbindBtn" id="memState">信息管理</p>
        <p class="cancelBtn">取消</p>
    </div>
</div>
<div class="nocard">
    <img src="img/nobindcard.png">
    <h3>你没有加入任何团队哦</h3>
</div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none">信息输入有误</div>
<div class="loading" style="display:none">
    <img src="img/loading.gif"></div>
<script type="text/javascript">
    var noMoreOrderText = "<div class='noMoreOrder'></div>";
    var getMoreOrderText = "<div class='getMoreOrder'></div>";
    var currentPage = 1;

    var unbindCardNo = "";// 解绑的卡号
    var fromPage = "${fromPage}";
    console.log("fromPage:" + fromPage);

    $(function () {

        $(".wrap").on('click', '.getMoreOrder', function (e) {
            getCardList();
        });

        getCardList(); // 绘制卡列表的dom
        // 点击卡片弹出提示框
        $("body").on("click", ".card_wrap", function (e) {
            unbindCardNo = $(this).attr("data-cardno");
            console.log(unbindCardNo);
            $(".mask_layer").removeClass('none')
            $(".unbind_box").animate({
                    bottom: 0
                },
                100, function () {

                });
        });

        // 点击解绑 解绑卡片
        $("#seeIntroduce").click(function (e) {
            window.location.href = "wxmp/info/group?oid=" + unbindCardNo;
        });
        $("#seeFrame").click(function (e) {
            window.location.href = "wxmp/info/frame2?oid=" + unbindCardNo;
        });
        $("#memState").click(function (e) {
            window.location.href = "wxmp/info/memOrg?oid=" + unbindCardNo;
        });

        // 点击取消，收起弹出框
        $(".cancelBtn").click(function (e) {
            $(".unbind_box").animate({
                    bottom: -139
                },
                100, function () {
                    $(".mask_layer").addClass('none')
                });
        });
    })

    function getCardList() {
        console.log('step into getCardList()')
        var data = {
            pageNum: currentPage,
            pageSize:10,
            usePager:"true"
        }
        $(".loading").show();
        $.ajax({
            url: $.httpRootPath() + 'rest/group/getGroupList',
            type: 'GET',
            dataType: 'json',
            data: data,
            cache: false,
            timeout: 15000,
            success: function (r) {
                $(".getMoreOrder,.card_list .noMoreProduct").remove();

                $(".loading").hide();
                if (r.code != "00") {
                    errorToast(r.msg, 3);
                    return false;
                }
                if (r.data.length == 0) {
                    $(".norecordbox").append(norecordText);
                    return false;
                }
                $("body").append("");

                var list = [];
                for (var i = 0; i < r.data.length; i++) {
                    var obj = r.data[i];
                    var oid = obj.id;
                    var name = obj.name; //组织名
                    var type = obj.type;	// 组织类型
                    var pro = obj.proName != "" ? obj.proName : "关注者";
                    var dep = obj.depName != "" ? obj.depName : "其他";
                    var auth = obj.memAuth;
                    list.push([name, type, dep, pro, oid, auth]);
                }
                loadCard(list, r.pager);
            },
            error: function (e) {
                console.log(e);
                $(".loading").hide();
                $(".norecordbox").append(norecordText);
                ajaxErrorEvent(e);

            }
        });
    }

    // 根据卡列表的长度加载页面
    function loadCard(list, pager) {
        console.log(list);
        if (!list) {
            return;
        }
        var clr;
        if (list.length == 0) {
            $(".nocard").removeClass('none');
            $(".wrap").addClass('none');
        } else {
            for (var i = 0; i < list.length; i++) {
                if (list[i][1] == 0) {
                    clr = "blue";
                } else if (list[i][1] == 1) {
                    clr = "ot";
                } else {
                    clr = "red"
                }
                var limitdate = list[i][3] ? "<img src='img/clock.png'><span>" + list[i][3] + "到期</span>" : "";
                if (list[i][5] == 0) {
                    limitdate = "<img src='img/auth.png'>"
                } else {
                    limitdate = "<img src='img/unauth.png'>"
                }
                var proName = "" + list[i][3]; // 每4位用空格分隔
                var depName = "" + list[i][2]; // 每4位用空格分隔
                var innerText = "<div class='card_wrap card_wrap_" + clr + "' data-cardNo='"
                    + list[i][4]
                    + "'>"
                    + "<h3> <i class = 'icon_card '></i>"
                    + list[i][0]
                    + "<span>"
                    + " <i>"
                    + limitdate
                    + "</i>"
                    + "</span></h3>"
                    + "<h6>"
                    + depName + " - " + proName
                    + "</h6>"
                "<input type='hidden' value=" + list[i][4] + ">"
                + "</div>";
                $(".card_list").append(innerText);
            };
            // 有下一页 显示加载更多的按钮
            if (pager.hasNextPage) {
                $(".card_list").append(getMoreOrderText);
                currentPage++;
            } else {
                $(".card_list").append(noMoreOrderText);

            }
            $(".nocard").addClass('none');
            $(".wrap").removeClass('none');
        }
    }

    function joinGroup() {
        window.location.href = 'wxmp/group/add?fromPage=groupList';
    }
</script>
</body>
</html>